<template>
  <div class="add-article">
    <el-card shadow="never">
      <template #header>
        <div class="header">
          <span>发表文章</span>
        </div>
      </template>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="文章分类" prop="cate_id">
          <el-select v-model="form.cate_id" placeholder="请选择分类" style="width: 100%;">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.cate_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <quill-editor v-model="form.content"></quill-editor>
        </el-form-item>
        <el-form-item label="文章封面" prop="cover_img">
          <div class="image">
            <img :src="imageUrl" alt="请选择封面" />
          </div>
          <div @click="onUpload" class="opt-file">
            <i class="el-icon-plus"></i>
            <span>选择封面</span>
          </div>
          <input type="file" ref="fileInput" accept="image/*" @change="getFile" style="display: none"/>
        </el-form-item>
        <el-button @click="submit" class="btn" type="primary" size="mini">发布</el-button>
        <el-button @click="temp" class="draft" size="mini">存为草稿</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCateList } from '@/api/cate'
import { addArticle } from '@/api/article'
import { quillEditor } from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'add-article-page',
  components: {
    quillEditor
  },
  data () {
    return {
      options: [],
      form: {
        cate_id: null,
        title: '',
        content: '',
        cover_img: null,
        state: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: ['blur', 'change'] },
          { min: 1, max: 30, message: '请输入1~30个字符', trigger: ['blur', 'change'] }
        ],
        cate_name: [{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }],
        content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      },
      imageUrl: ''
    }
  },
  async created () {
    this.initData()
  },
  methods: {
    async initData () {
      const { data } = await getCateList()
      this.options = data
    },
    async onUpload () {
      this.$refs.fileInput.click()
    },
    getFile (event) {
      const files = event.target.files
      const filename = files[0].name
      if (filename.lastIndexOf('.') <= 0) {
        return alert('Please add a valid image!')
      }
      const fileReader = new FileReader()
      fileReader.addEventListener('load', () => {
        this.imageUrl = fileReader.result
      })
      fileReader.readAsDataURL(files[0])
      this.image = files[0]
    },
    async loadArticle () {
      this.form.cover_img = this.image
      const fd = new FormData()
      fd.append('title', this.form.title)
      fd.append('cate_id', this.form.cate_id)
      fd.append('content', this.form.content)
      fd.append('state', this.form.state)
      fd.append('cover_img', this.form.cover_img)
      await addArticle(fd)
      this.$router.push('/articleList')
    },
    submit () {
      this.form.state = '已发布'
      this.loadArticle()
      this.$message.success('发布文章成功')
    },
    temp () {
      this.form.state = '草稿'
      this.loadArticle()
      this.$message.success('发布草稿成功')
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  margin-top: 25px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 16px;
    span {
      font-size: 16px;
      color: #131523;
      font-weight: 500;
    }
  }
  .el-form {
    .quill-editor {
      ::v-deep .ql-editor {
        height: 120px;
      }
    }
    .image {
      width: 320px;
      height: 220px;
      background-color: #eee;
      img {
        width: 320px;
        height: 220px;
      }
    }
    .opt-file {
      color: #4F81FF;
      &:hover {
        cursor: pointer;
      }
    }
    .btn {
      margin-left: 80px;
    }
    .draft {
      background-color: #E7E7E7;
    }
  }
}
</style>
